<template>
  <el-card shadow="hover" class="layout-padding-auto">
    <el-row class="row">
      <el-col :span="3">
        <div class="back" @click="backGZT">←返回上一层</div>
        <el-menu
          :default-active="menuData[0]?.children[0]?.type"
          class="el-menu-vertical-demo"
          background-color="#fff"
          text-color="#2B2B2B"
          active-text-color="#02AD82"
          popper-effect="light"
        >
          <el-sub-menu
            v-for="(item, index) in menuData"
            :key="item.type"
            :index="item.type"
          >
            <template #title>
              <span>{{ item.name }}</span>
            </template>

            <el-menu-item
              v-for="(itemChild, index) in item.children"
              :key="itemChild.type"
              :index="itemChild.type"
              @click="itemClick"
              >{{ itemChild.name }}&nbsp;&nbsp;<span
                style="color: var(--el-color-primary)"
                >({{ itemChild.wdNum }})</span
              >
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
      <el-col :span="1" class="col-divider">
        <el-divider direction="vertical" class="divider" />
      </el-col>
      <el-col :span="19" v-if="msgList.length != 0">
        <div class="messageBox" v-for="item in msgList">
          <div class="title">
            <span>{{ item.title }}</span>
            <img
              v-if="item.readStatus == 0"
              style="margin-left: 8px"
              src="../../assets/Oval3.png"
              alt=""
            />
          </div>
          <div class="detailed-introduce">
            <div class="intro-content" ref="content">
              <span class="merchant-desc" ref="desc">
                {{ item.content }}
              </span>
            </div>
          </div>
          <div class="detail-btn">
            <div class="time">发送时间：{{ item.createTime }}</div>
            <div
              class="btn"
              @click="lookDetail(item)"
              v-if="item.title.substr(-4) != '结果提醒'"
            >
              查看详情
            </div>
            <div
              class="btn"
              @click="readDetail(item)"
              v-if="item.title.substr(-4) == '结果提醒' && item.readStatus == 0"
            >
              消息已读
            </div>
          </div>
          <el-divider />
        </div>
        <el-pagination
          v-if="msgList.length > 0"
          v-model:current-page="Obj.pageNum"
          v-model:page-size="Obj.pageSize"
          :page-sizes="[10, 20, 30]"
          :total="Obj.total"
          layout="total, sizes, prev, pager, next, jumper"
          background
          @size-change="onHandleSizeChange"
          @current-change="onHandleCurrentChange"
        >
        </el-pagination>
      </el-col>
      <el-col :span="19" v-else class="noData">
        <img
          v-if="themeConfig.primary == '#02AD82'"
          src="../../assets/noData.png"
          alt=""
        />
        <img
          v-else-if="themeConfig.primary == '#063C74'"
          src="../../assets/noData3.png"
          alt=""
        />
        <img
          v-else="themeConfig.primary == '#514FC2'"
          src="../../assets/noData2.png"
          alt=""
        />
      </el-col>
    </el-row>
  </el-card>
</template>
<script setup lang="ts">
import { ref, reactive, nextTick, onMounted, getCurrentInstance } from 'vue'
import { getUnreadNumApi, messageListApi, readMessageApi } from '/@/api/message'
import router from '/@/router'
import { storeToRefs } from 'pinia'
import { useThemeConfig } from '/@/stores/themeConfig'
import { ElMessage } from 'element-plus'
const storesThemeConfig = useThemeConfig()
const { themeConfig } = storeToRefs(storesThemeConfig)
const pageInstance = getCurrentInstance() as any
interface TypeData {
  type: string //类型
  name: string //名称
  children: Array<any>
}
const menuData: TypeData[] = reactive([
  {
    type: '1',
    name: '消息列表',
    children: [
      { type: '2', name: '维修消息', wdNum: '' },
      { type: '3', name: '维保消息', wdNum: '' },
      { type: '4', name: '点检消息', wdNum: '' },
      { type: '5', name: '备件消息', wdNum: '' }
    ]
  }
])
const configType = ref('2')

const itemClick = (item: any) => {
  configType.value = item.index
  getMessageList()
}

const Obj = ref<any>({
  pageNum: 1,
  pageSize: 10,
  total: ''
})

const msgList = ref<any>([])
const getMessageList = () => {
  let params = {
    pn: Obj.value.pageNum,
    ps: Obj.value.pageSize,
    msgType: configType.value
  }
  messageListApi(params).then((res) => {
    if (res.code == 0) {
      msgList.value = res.data.records
      Obj.value.total = res.data.total
      Obj.value.pageSize = res.data.size
      Obj.value.pageNum = res.data.current
    }
  })
}
getMessageList()
// 分页改变
const onHandleSizeChange = (val: number) => {
  Obj.value.pageSize = val
  getMessageList() //获取列表
}
// 分页改变
const onHandleCurrentChange = (val: number) => {
  Obj.value.pageNum = val
  getMessageList() //获取列表
}

const wdNum = () => {
  getUnreadNumApi().then((res) => {
    if (res.code == 0) {
      menuData[0].children[0].wdNum = res.data.repairNum
      menuData[0].children[1].wdNum = res.data.maintainNum
      menuData[0].children[2].wdNum = res.data.checkNum
      menuData[0].children[3].wdNum = res.data.partNum
    }
  })
}
wdNum()

const lookDetail = (row: any) => {
  readMessageApi([row.id]).then((res) => {
    if (res.code == 0) {
      if (row.msgType == '2') {
        if (row.bizId !== '') {
          router.push({
            name: 'repairOrderDetail',
            query: {
              id: row.bizId,
              type: 'msg'
            }
          })
        } else {
          router.push({
            name: 'repair'
          })
        }
      } else if (row.msgType == '3') {
        router.push({
          name: 'maintenanceTask'
        })
      } else if (row.msgType == '4') {
        router.push({
          name: 'checkTask'
        })
      } else if (row.msgType == '5') {
        let str = row.title.slice(0, 4)
        if (str == '备件申请') {
          router.push({
            name: 'apply'
          })
        } else if (str == '备件退还') {
          router.push({
            name: 'return'
          })
        } else if (
          str == '备件库存' ||
          str == '备件过期' ||
          str == '库存不足'
        ) {
          router.push({
            name: 'spareList'
          })
        }
      }
    }
  })
}

const readDetail = (row: any) => {
  readMessageApi([row.id]).then((res) => {
    if (res.code == 0) {
      ElMessage.success('已读成功')
      getMessageList()
    }
  })
}

const backGZT = () => {
  router.go(-1)
}
</script>
<style scoped lang="scss">
.row {
  display: flex;
  height: 100%;

  .col-divider {
    padding-left: 10px;

    .divider {
      height: 100%;
      padding-left: 10px;
    }
  }
}

// 鼠标 hover 时颜色
.el-menu-hover-bg-color {
  // background-color: var(--next-bg-menuBarActiveColor) !important;
  background-color: transparent !important;
}

.el-menu {
  border-right: none !important;
  width: 100%;
}

.el-menu-item {
  margin: 4px !important;
  height: 36px !important;
  line-height: 36px !important;
}

.el-menu-item.is-active {
  margin: 4px !important;
  border-radius: 4px !important;
  background: transparent !important;
}

.el-menu-item,
.el-sub-menu__title {
  // color: var(--next-bg-menuBarColor);
  // color:var(--el-color-primary) !important;
  color: #4d4d4d !important;
}

//水平菜单、横向菜单高亮 背景色，鼠标 hover 时，有子级菜单的背景色
.el-menu-item.is-active,
.el-sub-menu.is-active .el-sub-menu__title,
.el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
  // @extend .el-menu-hover-bg-color;
  // background: black !important;
  color: var(--el-color-primary) !important;
}

.el-menu-item:hover {
  @extend .el-menu-hover-bg-color;
  // color:skyblue !important;
}

::v-deep .el-sub-menu.is-active.is-opened .el-sub-menu__title {
  /* // background-color: var(--el-color-primary) !important; */
  background: rgba(2, 173, 130, 0.1) !important;
  border-radius: 4px;
}

.back {
  font-size: var(--el-font-size-base);
  font-weight: 400;
  line-height: 22px;
  color: rgba(140, 140, 140, 1);
  margin-bottom: 24px;
  cursor: pointer;
}

.messageBox {
  width: 50%;

  .title {
    font-size: var(--el-font-size-base);
    font-weight: 600;
  }

  .detailed-introduce {
    font-size: var(--el-font-size-base);
    position: relative;
    overflow: hidden;

    .intro-content {
      // 最大高度设为3倍的行间距
      // text-indent: 15px;
      overflow: hidden;
      text-align: left;

      .merchant-desc {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        margin: 16px 0;
      }
    }
  }

  .detail-btn {
    display: flex;
    justify-content: space-between;

    .time {
      color: rgba(140, 140, 140, 1);
    }

    .btn {
      cursor: pointer;
      color: var(--el-color-primary);
    }
  }
}

.noData {
  > img {
    display: flex;
    margin: auto;
  }
}
</style>
